<template>
  <div class="minBill">
    <div class="main">
      <div class="bill-item" v-for="(billListItem, index) in fullBillList" :key="index">
        <div class="bill-item-top">
          <div class="date">
            <div>{{ billListItem.date }}</div>
            <div class="date-relative">{{ billListItem.dateIdentification }}</div>
          </div>
          <div class="total">
            <div class="total-item">
              <div>收:</div>
              <div class="total-sum">{{ billListItem.incomeAmount }}</div>
            </div>
            <div class="total-item">
              <div>支:</div>
              <div class="total-sum">{{ billListItem.expenditureAmount }}</div>
            </div>
          </div>
        </div>
        <div class="bill-item-main" v-for="item in billListItem.list" :key="item.id">
          <div class="bill-item-logo">
            <div class="bill-item-logo-item">
              <van-image width="50" :src="imageSrc"></van-image>
            </div>
          </div>
          <div class="bill-item-text">{{ item.remark }}</div>
          <div class="bill-item-money">￥{{ item.money }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="MinBill">
// 小账单：组件
// 引入图片
import exampleImage from '@/icon/068_购物.svg'

import { ref, reactive, computed } from 'vue'

let imageSrc = ref(exampleImage)

// console.log(Date.parse(new Date()))
// console.log("模拟时间",new Date('2025-01-13T12:00:00Z').getTime())

// 模拟数据-原始数组
let billList = [
  {
    id: 'davagiuufiayva01',
    fLevelCategory: '购物',
    SLevelCategory: '谷子',
    remark: '谷子',
    date: 1736850134000, // 1月14日
    icon: '068_购物',
    money: 23.75,
    iOrE: 'i'
  },
  {
    id: 'davagiuufiayva02',
    fLevelCategory: '购物',
    SLevelCategory: '谷子',
    remark: '谷子',
    date: 1736850134000, // 1月14日
    icon: '068_购物',
    money: 23.75,
    iOrE: 'i' // i收入 e支出
  },
  {
    id: 'davagiuufiayva03',
    fLevelCategory: '购物',
    SLevelCategory: '谷子',
    remark: '谷子',
    date: 1736769600000, // 1月13日
    icon: '068_购物',
    money: 23.75,
    iOrE: 'i' // i收入 e支出
  }
]

// 新数组 组成部分
/*
  [
    {
      date: '', // 日期
      incomeAmount: 100.00, // 收入金额
      expenditureAmount: 0, //支出金额
      dateIdentification: ,// 日期标识
      list:[], // 账单列表
    },
  ]
*/

// console.log((new Date(1736850134000)))
// console.log((new Date(1736850134000).getMonth() + 1) + '月')
// console.log(new Date(1736850134000).getDate() + '日')
// console.log(new Date(1736850134000))


let fullBillList = computedBillList(billList)


// 计算属性
function computedBillList(billList:any) {
  let temporary: any = []
  for (let i = 0; i < billList.length; i++) {
    // 当前记录
    let billItem = billList[i]

    // console.log(new Date(billItem.date).getMonth())
    // console.log(new Date(billItem.date).getDate())

    // 后续可优化，列表中只涉及到一个年份就不显示，涉及多个就显示，不过一般不做跨年的账单
    // 得到日期（x月x日）忽略年
    let date = (new Date(billItem.date).getMonth() + 1) + '月' + new Date(billItem.date).getDate() + '日'
    // 查询当前是否有该日期，下标默认-1
    let fullBillListIndex = -1
    for (let y = 0; y < temporary.length; y++) {
      if (temporary[y].date == date) {
        fullBillListIndex = y
        break
      }
    }
    // 根据是否存在当前日期，进行填充数据
    // 如果存在
    if (fullBillListIndex != -1) {
      let currentItem = temporary[fullBillListIndex]

      // 1.判断收支情况，加入对应的对象金额
      if (billItem.iOrE == 'i') { // 收入
        currentItem.incomeAmount += billItem.money
      } else {
        currentItem.expenditureAmount += billItem.money
      }

      // 2.添加到数组中
      currentItem.list.push(billItem)
    } else { // 如果记录不存在
      let incomeAmount = 0
      let expenditureAmount = 0
      let dateIdentification = '' //日期标识

      if(billItem.iOrE == 'i'){
        incomeAmount += billItem.money
      }else{
        expenditureAmount += billItem.money
      }

      let todayFullDate = (new Date().getMonth() + 1) + '月' + new Date().getDate() + '日'
      if(todayFullDate == date){
        dateIdentification = '今日'
      }else{
        const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        dateIdentification = days[new Date(billItem.date).getDay()]
      }

      let newObj = {
        date: date, // 日期
        incomeAmount: incomeAmount, // 收入金额
        expenditureAmount: expenditureAmount, //支出金额
        dateIdentification: dateIdentification, // 日期标识
        list: [billItem], // 账单列表
      }

      temporary.push(newObj);
    }
  }
  return temporary
}

</script>

<style scoped lang="less">
@garyFontColor : rgb(125, 125, 125);
@iconBGColor: rgb(245, 245, 245);

.bill-item {
  .bill-item-top {
    display: flex;
    color: @garyFontColor;

    .date,
    .total {
      font-size: 30px;
      display: flex;
      align-items: center;
      width: 50%;

      .total-sum {
        margin-top: 5px;
      }
      .total-item{
        display: flex;
        margin-left: 10px;
      }
    }

    .total {
      justify-content: flex-end;
    }

    .date-relative {
      margin-left: 10px;
    }
  }

  .bill-item-main {
    display: flex;
    align-items: center;
    margin: 15px 0;

    .bill-item-logo {
      width: 18%;

      .bill-item-logo-item {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: @iconBGColor;
        width: 100px;
        height: 100px;
        border-radius: 30%;
      }
    }

    .bill-item-text {
      width: 62%;
    }

    .bill-item-money {
      color: red;
      font-weight: 600;
      width: 20%;
    }
  }
}
</style>